<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Permissions-Policy" content="unload=*">
    <title>股票板块与股票池</title>
    <link href="../static/css/kpl/index.css" th:href="@{/css/kpl/index.css}" rel="stylesheet"/>
</head>
<body>
    <div class="container">
        <div class="sidebar">
            <div class="header">
                <div class="title">精选板块
                </div>
                <div class="date">
                    <input style="width: 120px;" type="text" id="recordDate" name="recordDate" class="Wdate" onFocus="WdatePicker({ onpicking: cDayFunc})" />
                </div>
            </div>
            <div class="reason">三季报增长 【爆发原因】</div>
            <div class="sector-list-container">
                <ul class="sector-list" id="sector-list">
                    <!-- 板块数据将通过AJAX动态加载 -->
                    <div class="loading">正在加载板块数据...</div>
                </ul>
            </div>
        </div>
        
        <div class="main-content">
            <div class="current-sector" id="current-sector">当前板块：全部</div>
            <div class="table-container">
                <table id="stock-table">
                    <thead>
                        <tr>
                            <th>代码</th>
                            <th>名称</th>
                            <th>涨幅%</th>
                            <th>涨速%</th>
                            <th>领涨</th>
                            <th>主力</th>
                            <th>连板</th>
                            <th>主题</th>
                            <th>主力净额</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- 股票数据将通过AJAX动态加载 -->
                        <tr>
                            <td colspan="9" class="loading">正在加载股票数据...</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script th:src="@{/js/jquery.min.js}"></script>
    <script src="../static/ruoyi/js/ry-ui.js" th:src="@{/ruoyi/js/ry-ui.js?v=4.8.0}"></script>
    <script src="../static/DatePicker/WdatePicker.js" th:src="@{/DatePicker/WdatePicker.js}"></script>
    <script>
        Date.prototype.Format = function (fmt) {
            var o = {
                "M+": this.getMonth() + 1, //月份
                "d+": this.getDate(), //日
                "h+": this.getHours(), //小时
                "m+": this.getMinutes(), //分
                "s+": this.getSeconds(), //秒
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度
                "S": this.getMilliseconds() //毫秒
            };

            if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        };

        var ctx = "/kpl";
        // 格式化主力净额显示
        function formatMainNetAmount(amount) {
            if (amount >= 10000) {
                return (amount / 10000).toFixed(2) + '亿';
            } else if (amount >= 1000) {
                return (amount / 1000).toFixed(2) + '千万';
            } else {
                return amount + '万';
            }
        }

        // 渲染股票表格
        function renderStockTable(stocks) {
            const stockTable = $('#stock-table tbody');
            stockTable.empty();
            
            if (stocks.length === 0) {
                stockTable.append('<tr><td colspan="9" class="loading">该板块暂无股票数据</td></tr>');
                return;
            }
            
            stocks.forEach(function(stock) {
                const row = $('<tr></tr>');
                row.append('<td class="stock-code">' + stock.code + '</td>');
                row.append('<td class="stock-name">' + stock.name + '</td>');
                row.append('<td class="stock-rise">' + stock.increaseRate + '</td>');
                row.append('<td class="stock-speed">' + stock.riseSpeed + '</td>');
                row.append('<td><span class="stock-leading">' + stock.leading + '</span></td>');
                row.append('<td>' + stock.mainForce + '</td>');
                row.append('<td class="stock-consecutive">' + stock.consecutiveBoards + '</td>');
                row.append('<td class="stock-theme" title="' + stock.theme + '">' + stock.theme + '</td>');
                
                const mainNetClass = stock.mainNetAmount < 0 ? 'stock-main-net negative' : 'stock-main-net';
                const formattedAmount = formatMainNetAmount(stock.mainNetAmount);
                row.append('<td class="' + mainNetClass + '">' + formattedAmount + '</td>');
                
                stockTable.append(row);
            });
        }

        $(function () {
            var day = new Date();
            gt = day.getTime();
            mymonth = day.getMonth()+1;
            myday = day.getDate();
            if(mymonth >= 10){mymonth = mymonth;}else{mymonth = "0" + mymonth;}
            if(myday >= 10){myday = myday;}else{myday = "0" + myday;}
            tt = day.getFullYear() + "-" + mymonth + "-" + myday;
            //初始化日期
            $("#recordDate").val(tt);
            //初始化查询所有数据
            getStockSector(tt);
            // 为板块项添加点击事件
            $('.sector-list-container').on('click', '.sector-item', function() {
                // 移除其他项的active类
                $('.sector-item').removeClass('active');
                // 为当前点击项添加active类
                $(this).addClass('active');

                // 获取选中的板块名称
                const sectorName = $(this).data('sector');
                const id = $(this).data('id');
                currentSector = sectorName;
                // 更新当前板块显示
                $('#current-sector').text('当前板块：' + sectorName);
                // 根据板块名称过滤股票数据
                if (sectorName === '全部') {
                    getStockSector($("#recordDate").val());
                } else {
                    getStockInfo(id);
                }
            });
        });

        function getStockSector(recordDate){
            let currentSector = "全部";
            $.ajax({
                type: "post",
                url: ctx + "/list",
                data: {
                    "recordDate":recordDate
                },
                beforeSend: function () {
                    // 显示加载状态
                },
                success: function (r) {
                    if (r.code == web_status.SUCCESS) {
                        // 填充板块数据
                        const sectorList = $('#sector-list');
                        sectorList.empty();

                        // 添加"全部"选项
                        const allItem = $('<li class="sector-item active" data-sector="全部"></li>');
                        const allNameDiv = $('<div class="sector-name"></div>');
                        allNameDiv.append('<span class="star">★</span>');
                        allNameDiv.append('<span>全部板块</span>');

                        const allInfoDiv = $('<div></div>');
                        allInfoDiv.append('<span class="sector-strength">总数：' +  r.rows.length + '</span>');

                        allItem.append(allNameDiv);
                        allItem.append(allInfoDiv);
                        sectorList.append(allItem);

                        // 添加各个板块
                        r.rows.forEach(function(sector) {
                            const item = $('<li class="sector-item" data-id="' + sector.id + '" data-sector="' + sector.name + '"></li>');
                            const nameDiv = $('<div class="sector-name"></div>');
                            nameDiv.append('<span class="star">★</span>');
                            nameDiv.append('<span>' + sector.name + '</span>');

                            const infoDiv = $('<div></div>');
                            infoDiv.append('<span class="sector-strength">强度：' + sector.strength + '</span>');
                            infoDiv.append('<span class="sector-rise">涨幅：' + sector.increase + '%</span>');

                            item.append(nameDiv);
                            item.append(infoDiv);
                            sectorList.append(item);
                        });
                        //获取第一个，生成股票池
                        getStockInfo(r.rows[0].id);
                    } else {
                        // 处理错误情况
                        console.error("数据加载失败");
                    }
                }
            });
        }

        //获取股票池信息
        function getStockInfo(id){
            $.ajax({
                type: "post",
                url: ctx + "/getStockInfo",
                data: {
                    "recordDate": $("#recordDate").val(),
                    "setorId": id
                },
                beforeSend: function () {
                    // 显示加载状态
                },
                success: function (r) {
                    if (r.code == web_status.SUCCESS) {
                        // 填充股票数据
                        const stockTable = $('#stock-table tbody');
                        stockTable.empty();
                        r.rows.forEach(function(stock) {
                            const row = $('<tr></tr>');
                            var riseSpeed = stock.riseSpeed == null ? "" : stock.riseSpeed;
                            var leadUp = stock.leadUp == null ? "" : stock.leadUp;
                            var consecutiveBoards = stock.consecutiveBoards == null ? "" : stock.consecutiveBoards;
                            var mainForce = stock.mainForce == null ? "" : stock.mainForce;
                            var theme = stock.theme == null ? "" : stock.theme;
                            row.append('<td class="stock-code">' + stock.code + '</td>');
                            row.append('<td class="stock-name">' + stock.name + '</td>');
                            row.append('<td class="stock-rise">' + stock.increaseRate + '</td>');
                            row.append('<td class="stock-speed">' + riseSpeed + '</td>');
                            row.append('<td><span class="stock-leading">' + leadUp + '</span></td>');
                            row.append('<td>' + mainForce + '</td>');
                            row.append('<td class="stock-consecutive">' + consecutiveBoards + '</td>');
                            row.append('<td class="stock-theme" title="' + stock.theme + '">' + theme + '</td>');

                            const mainNetClass = stock.mainNetAmount < 0 ? 'stock-main-net negative' : 'stock-main-net';
                            const formattedAmount = formatMainNetAmount(stock.mainNetAmount);
                            row.append('<td class="' + mainNetClass + '">' + formattedAmount + '</td>');

                            stockTable.append(row);
                        });
                    } else {
                        // 处理错误情况
                        console.error("数据加载失败");
                    }
                }
            });
        }

        function cDayFunc(dp) {
            var date = dp.cal.getNewDateStr();
            if(isWeekend(date)){
                return
            }
            getStockSector(date);
            //BookingRmk(date);//调用其它函数并带上参数
        }
        // function BookingRmk(date){
        //     tt = date;
        //     var date1 = new Date(tt);
        //     var date2 = new Date(dt);
        //     k = 0;
        //     if(date1.getTime() < date2.getTime()){
        //         k = 1;
        //         tradeday();
        //     }
        //     getSource();
        // }
        // function tradeday() {  //判断最后交易日
        //     var day = new Date(tt);
        //     for (i = 1; i < 100; i++){	//节假日
        //         if(i > 1){
        //             day.setTime(day.getTime() - 24*60*60*1000);
        //         }
        //         tt = day.Format("yyyy-MM-dd");
        //         //alert(tt);
        //         // var url = "https://apphis.longhuvip.com/w1/api/index.php?Order=1&a=RealRankingInfo&st=30&apiv=w26&Type=1&c=ZhiShuRanking&ZSType=7&Date=" + tt;
        //         // var xhr = new XMLHttpRequest();
        //         // xhr.open("GET", url, false);//同步
        //         // xhr.send(null)
        //         // var data = xhr.responseText;
        //         //document.write(data);
        //         // if(data.indexOf("MYSQL数据库链接出错!") == -1){
        //         //     break;
        //         // }
        //     }
        // }

        function getSource() {
        }

        function isWeekend(date) {
            var date = date==null ? new Date(): new Date(date);
            const day = date.getDay(); // 0=周日, 1=周一, ..., 6=周六
            return day === 0 || day === 6;
        }

    </script>
</body>
</html>